<template >
  <div class="goods">
    <!-- 添加和搜索 -->
    <el-form
      :model="queryForm"
      :rules="rules"
      ref="queryForm"
      class="demo-ruleForm"
    >
      <div style="display: flex">
        <el-form-item prop="queryType">
          <el-select
            v-model="queryForm.queryType"
            placeholder="请选择查询类型"
            size="small"
            style="width: 150px"
          >
            <el-option
              v-for="item in queryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="queryText">
          <el-input
            class="query"
            placeholder="请输入查询内容"
            prefix-icon="el-icon-search"
            v-model.number="queryForm.queryText"
            clearable
            size="small"
          >
          </el-input>
          <el-button type="primary" @click="submitForm('queryForm')" size="mini"
            >查询</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="$router.push('goods/add')"
            >新增</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="data.rows" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="商品 ID">
              <span>{{ scope.row._id }}</span>
            </el-form-item>
            <el-form-item label="用户 ID">
              <span>{{ scope.row.userId._id }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ scope.row.desc }}</span>
            </el-form-item>
            <el-form-item label="上架时间">
              <span>{{ time(scope.row.time) }}</span>
            </el-form-item>
            <el-form-item label="商品略缩图" style="margin-right: 100px">
              <img :src="img(scope.row.img)" alt="" class="img" />
            </el-form-item>
            <el-form-item label="商品详情图">
              <template v-for="(item, index) in scope.row.images">
                <img :key="index" :src="img(item)" alt="" class="img" />
              </template>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="用户名" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.userId.userName }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" align="center">
      </el-table-column>
      <el-table-column prop="price" label="商品价格" align="center" width="120">
      </el-table-column>
      <el-table-column prop="type" label="商品类型" align="center" width="100">
      </el-table-column>
      <el-table-column label="商品状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip
            :content="scope.row.status ? '出售' : '停售'"
            placement="top"
          >
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value
              @change="(status) => changeStatus(status, scope.row._id)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip
            content="-1:未通过 0:待审核 1:已通过"
            effect="light"
            placement="top"
          >
            <span>{{ scope.row.check }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="$router.push('goods/edit/' + scope.row._id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px 0 0 -10px">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="data.total"
        :current-page="data.page"
        @current-change="pageChange"
        hide-on-single-page
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import goodsApi from "../../api/goods";
import Moment from "moment";
import config from "../../utils/config";
export default {
  data() {
    return {
      data: {
        query: {},
        page: 1,
        limit: 10,
        total: 0,
        maxPage: 0,
        rows: [],
      },
      goods: {},
      queryForm: {
        queryText: "",
        queryType: "name",
      },
      queryOptions: [
        {
          value: "name",
          label: "商品名称",
        },
        {
          value: "type",
          label: "商品类型",
        },
        {
          value: "check",
          label: "审核状态",
        },
      ],
      rules: {
        queryType: [{ required: true, message: "请选择查询类型" }],
      },
      resource_server: config["resource_server"],
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    pageChange(page) {
      this.data.page = page;
      this.getGoods();
    },
    //查询
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getGoods();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    time(time) {
      return Moment(time).format();
    },
    img(path) {
      return this.resource_server + path;
    },
    async getGoods() {
      const data = await goodsApi.get({
        page: this.data.page,
        limit: this.data.limit,
        query: {
          [this.queryForm.queryType]: this.queryForm.queryText,
        },
      });
      Object.assign(this.data, data);
    },
    async changeStatus(status, _id) {
      const data = await goodsApi.changeStatus({ _id, status });
      if (data.nModified === 1) {
        this.$message({
          type: "success",
          message: status ? "商品已上架" : "商品已下架",
        });
      }
    },
  },
};
</script>
<style lang="scss">
.goods {
  margin: 50px;
}
.query {
  margin: 0 20px;
  width: 250px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.img {
  width: 100px;
  height: 100px;
  margin-right: 50px;
  border: 1px solid #f2f2f2;
}
</style>